<template>
    <div class="app-container" style="padding:20px">
        <el-card>
            <FormTopBar :title="title" :flowInsId="form.flowInsId" :taskId="taskId" :businessId="form.id"
                        :billType="form.billType" @submitForm="submitForm"></FormTopBar>
        </el-card>
        <FlowInfoCard  :id="form.id+''" :billType="form.billType" :flowInsId="form.flowInsId">
        <!-- 添加或修改员工入职对话框 -->
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="readonly">
                <el-card class="top15">
                    <div slot="header" class="clearfix">
                        <span>基础信息</span>
                        <span style="float: right" v-if="form.id!=undefined">单据编号：{{form.billCode}}</span>
                    </div>
                    <el-row>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="选择车辆" prop="carId">
                                <el-select v-model="form.carId" placeholder="请选择使用车辆" clearable @change="selectCar">
                                    <el-option v-for="car in carList" :key="car.id" :label="car.carModel+'('+car.carNo+')'" :value="car.id"/>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="车牌号">
                                <el-input v-model="form.carNo" placeholder="自动获取"  :disabled="true" />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="车型号">
                                <el-input v-model="form.carModel" placeholder="自动获取"  :disabled="true" />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="颜色">
                                <el-input v-model="form.color" placeholder="自动获取"  :disabled="true" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row v-if="form.billType=='car_apply'">
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="座位数">
                                <el-input v-model="form.seatCount" placeholder="自动获取"  :disabled="true" />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="目的地" prop="destination">
                                <el-input v-model="form.destination" placeholder="请输入目的地" />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="联系方式" prop="contactsPhone">
                                <el-input v-model="form.contactsPhone" placeholder="请输入联系方式" />
                            </el-form-item>
                        </el-col>
                    </el-row>


                    <el-row v-if="form.billType=='car_repair'">
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="维修地址" prop="repairAddress">
                                <el-input v-model="form.repairAddress" placeholder="请输入维修地址"/>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="维修金额" prop="costAmt">
                                <el-input v-model="form.costAmt" placeholder="请填写维修金额" />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="联系方式" prop="contactsPhone">
                                <el-input v-model="form.contactsPhone" placeholder="请输入联系方式" />
                            </el-form-item>
                        </el-col>
                    </el-row>


                    <el-row v-if="form.billType=='car_maintenance'">
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="保养地址" prop="repairAddress">
                                <el-input v-model="form.maintenanceAddress" placeholder="请输入保养地址"/>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="保养金额" prop="costAmt">
                                <el-input v-model="form.costAmt" placeholder="请填写保养金额" />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="联系方式" prop="contactsPhone">
                                <el-input v-model="form.contactsPhone" placeholder="请输入联系方式" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row v-if="form.billType=='car_scrap'">
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="报废类型" prop="scrapType">
                                <el-input v-model="form.scrapType" placeholder="请输入报废类型"/>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="收入金额" prop="incomeAmt">
                                <el-input v-model="form.incomeAmt" placeholder="请填写收入金额" />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="联系方式" prop="contactsPhone">
                                <el-input v-model="form.contactsPhone" placeholder="请输入联系方式" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row  v-if="form.billType=='car_apply'">
                        <el-form-item label="使用缘由" prop="reason" >
                            <el-input v-model="form.reason" type="textarea" :rows="5" placeholder="请输入使用缘由" />
                        </el-form-item>
                    </el-row>

                    <el-row  v-if="form.billType=='car_repair'">
                        <el-form-item label="维修内容" prop="repairContent" >
                            <el-input v-model="form.repairContent" type="textarea" :rows="5" placeholder="请输入维修内容" />
                        </el-form-item>
                    </el-row>

                    <el-row  v-if="form.billType=='car_maintenance'">
                        <el-form-item label="保养内容" prop="maintenanceContent" >
                            <el-input v-model="form.maintenanceContent" type="textarea" :rows="5" placeholder="请输入保养内容" />
                        </el-form-item>
                    </el-row>

                    <el-row  v-if="form.billType=='car_scrap'">
                        <el-form-item label="报废缘由" prop="reason" >
                            <el-input v-model="form.reason" type="textarea" :rows="5" placeholder="请输入报废缘由" />
                        </el-form-item>
                    </el-row>

                </el-card>
            </el-form>
        </FlowInfoCard>
    </div>
</template>

<script>
import FlowInfo from "@/views/workflow/flow/flowInfo";
import {listCarApply, getCarApply, delCarApply, addCarApply, updateCarApply} from "@/api/oa/carApply";
import {listCarAll,getCar} from "@/api/oa/car";
import FormTopBar from "@/views/workflow/common/formTopBar"
import FlowInfoCard from "@/views/workflow/common/flowinfoCard";
export default {
    name: "CarApplyForm",
    components:{FlowInfo,FormTopBar,FlowInfoCard},
    data() {
        return {
            // 表单参数
            form: {
            },
            title:"",
            showFlowInfo:false,
            taskId:'',
            // billType:'',
            readonly:false,
            // 表单校验
            rules: {
                carId: [
                    {required: true, message: "车辆不能为空", trigger: "blur"}
                ],
                costAmt:[
                    {
                        type: "number", message: "请输入数字（金额单位：元）", trigger: "blur",
                        transform: (value) => {
                            value = (value + "").replace(/(^\s*)|(\s*$)/g, "");  // 先去除前后空格
                            return value || value === 0 ? Number(value) : "";  // 转为数字
                        },
                    }
                ],
                incomeAmt:[
                    {
                        type: "number", message: "请输入数字（金额单位：元）", trigger: "blur",
                        transform: (value) => {
                            value = (value + "").replace(/(^\s*)|(\s*$)/g, "");  // 先去除前后空格
                            return value || value === 0 ? Number(value) : "";  // 转为数字
                        },
                    }
                ],
            },
            showCommitDialog:false,
            commitType:"",
            carList:[],
            carNo:"",
            carModel:"",
            seatCount:""
        };
    },
    provide(){
        return {
            addCcedList:this.addCcedList
        }
    },
    created() {
        //查询车辆字典
        this.getCarList();
        //单据的id主键
        const formId = this.$route.params && this.$route.params.formId;
        //单据的类型
        const billType = this.$route.params && this.$route.params.billType;
        const taskId = this.$route.query && this.$route.query.taskId;
        const readonly = this.$route.query && this.$route.query.readonly;
        if(billType){
            this.form.billType = billType;
            this.setTitle(billType);
        }
        if(taskId){
            this.taskId = taskId;
        }
        if("1"==readonly){
            this.readonly = true;
        }
        if(formId){
            this.form.id = formId;
            this.getDetailData(formId);

        }
    },
    mounted() {
    },
    methods: {
        getCarList() {
            listCarAll().then(res=>{
                this.carList = res.data;
                console.log(this.carList);
            })
        },
        selectCar(carId){
            if(carId){
                this.carList.forEach((item)=>{
                    if(item.id==carId){
                        this.form.carNo = item.carNo;
                        this.form.color = item.color;
                        this.form.carModel = item.carModel;
                        this.form.seatCount = item.seatCount;
                    }
                })
            }
        },
        //  获取单据信息
        getDetailData(id) {
            getCarApply(id).then(response => {
                this.form = response.data;
                this.setTitle(this.form.billType);
                // this.selectCar(response.data.carId);
            });
        },
        setTitle(billType){
            if(billType=="car_apply"){
                this.title = "车辆使用申请";
            }else if(billType=="car_repair"){
                this.title = "车辆维修申请";
            }else if(billType=="car_maintenance"){
                this.title = "车辆保养申请";
            }else if(billType=="car_scrap"){
                this.title = "车辆报废申请";
            }
        },
        /** 提交按钮 */
        submitForm() {
            console.log(this.form.timeRange)
            // if(this.form.timeRange && this.form.timeRange.length>0){
            //     this.form.startTime = this.form.timeRange[0];
            //     this.form.endTime = this.form.timeRange[1];
            // }

            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        updateCarApply(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.closeThisPage();
                        });
                    } else {
                        addCarApply(this.form).then(response => {
                            this.$modal.msgSuccess("保存成功");
                            this.closeThisPage();
                        });
                    }
                }
            });
        },
        closeThisPage(){
            let s = "";
            if (this.form.billType == "car_apply")
                s = "/car/carApply";
            else if (this.form.billType == "car_repair")
                s = "/car/carRepair";
            else if (this.form.billType == "car_maintenance")
                s = "/car/carMaintenance";
            else if (this.form.billType == "car_scrap")
                s = "/car/carScrap";
            this.$tab.closeOpenPage({ path: s,query: {billType:this.form.billType}});
        },
        // 创建单据时候，选择了抄送人
        addCcedList(ccedList){
            this.form.ccedList = ccedList;
            console.log("回填抄送人")
            console.log(this.form)
        }
    }
};
</script>
